#@layout()
#define main()
<h1>Blog管理&nbsp;&nbsp;
<a href="#(ctx??)/project/add">创建project</a>
	#(errorMsg??)
</h1>
<div class="table_box" name="srcTable">
	<table class="list">
		<tbody id="up">
			<tr>
				<th width="4%">id</th>
				<th width="25%">标题</th>
				<th>项目类型</th>
				<th>操作系统</th>
				<th>负责人</th>
				<th>手机号</th>
				<th>创建时间</th>
				<th>更新时间</th>
				<th>子项目</th>
				<th width="25%">操作</th>
			</tr>
			
			#for(x : projectPage.getList())
			<tr id="src_#(x.id)" draggable="true" ondragstart="dragStart(event,#(x.id))">
				<td style="text-align:left;">#(x.id)</td>
				<td style="text-align:left;">#(x.title)</td>
				#if(x.type == 1)
				<td style="text-align:left;">web</td>
				#end
				#if(x.type == 2)
				<td style="text-align:left;">rpc</td>
				#end
				#if(x.type == 0)
				<td style="text-align:left;">vue</td>
				#end
				<td style="text-align:left;">#(x.dutyPerson)</td>
				<td style="text-align:left;">#(x.os)</td>
				<td style="text-align:left;">#(x.phone)</td>
				<td style="text-align:left;">#(x.createTime)</td>
				<td style="text-align:left;">#(x.updateTime)</td>
				<td style="text-align:left;">
					<select id="subProjectSelect" onchange="setSubProjectValue(this.value)">
						<option value="all">全部</option>
						#for(subProject : x.subProject??)
							<option value="#(subProject.projectName)">#(subProject.projectName)</option>
						#end
					</select>
				</td>
				<td style="text-align:left;">
<!--					&nbsp;&nbsp;<a onclick="confirm('确定要删除吗?')?location.href='#(ctx??)/project/delete/#(x.id)':''" href="javascript:;">删除</a>-->
					&nbsp;&nbsp;<a href="#(ctx??)/project/edit/#(x.id)">修改</a>
					&nbsp;&nbsp;<a href="#(ctx??)/step?projectId=#(x.id)">步骤</a>
						#if(x.status?? == 1)
							运行中...
							<a href="#(ctx??)/project/buildOut?projectId=#(x.id)">查看输出</a>
						#else
							<a onclick="startProject('#(x.title)',#(x.id),#(x.uploadFile))" href="javascript:;">启动</a>
						#end
					&nbsp;&nbsp;
					&nbsp;&nbsp;<a href="#(ctx??)/project/copy?projectId=#(x.id)">copy</a>
				</td>
			</tr>
			#end
		</tbody>
	</table>
	#@paginate(projectPage.pageNumber, projectPage.totalPage, "/project")
	<div>
		<label>执行目标</label>
		<div class="table_box" name="targetTable" id="down">
			<table class="list">
				<tbody id="targetBody"></tbody>
			</table>
		</div>
		<input type="button" value="批量启动" onclick="batRun()">
	</div>
</div>
#end

<script type="text/javascript">
	var subProjectSelect = 'all';
	var setSubProjectValue = function(value){
		subProjectSelect = value;
		console.log('changed... ' + subProjectSelect);
	}
	
	/**
		项目名称
		项目id
		是否上传文件
	*/
	var startProject = function(projectName,id,uploadFile){
		//console.log(subProjectSelect);
		if(projectName.indexOf('prod') != -1){
			var r = confirm("确定要启动正式吗?")
			if (r == false)
			{
			    return;
			}
		}
		if(uploadFile){
			location.href='#(ctx??)/project/toUploadbBuild?projectId=' + id + '&subProject=' + subProjectSelect;
		}else{
			location.href='#(ctx??)/project/build?projectId=' + id + '&subProject=' + subProjectSelect;
		}
		
	}

	//方法设置被拖数据的数据类型和值
	var dragStart = function(ev,id){
		var id = "src_"+id;
		var tr = document.getElementById(id);
		console.log("set tr id: " + id);
		ev.dataTransfer.setData('Text', id);
	}

	var pd = function(ev){
		ev.preventDefault(); //阻止向上冒泡
	}

	//批量启动任务
	var batRun = function(){
		$("#targetBody").children().each(function(){
			console.log(this.id);
		});
	}

	$(function(){

			//上－〉下
        document.getElementById('up').ondragover = function (ev) {
            ev.preventDefault(); //阻止向上冒泡
        }

			document.getElementById('up').ondrop = function (ev) {
            ev.preventDefault();
            var id = ev.dataTransfer.getData('Text');
            var elem = document.getElementById(id);
            var targetBody = document.getElementById("up"); //当前拖动的元素
            //toElement 有可能是td
            var toElem = ev.toElement.parentElement.id;
            if (toElem == 'up') {
                //如果为container,元素放置在末尾
                targetBody.appendChild(elem);
            } else {
                //如果为container里的元素，则插入该元素之前
                targetBody.insertBefore(elem, document.getElementById(toElem));
            }
        }

		//下－〉上
        document.getElementById('down').ondragover = function (ev) {
            ev.preventDefault(); //阻止向上冒泡
        }
        document.getElementById('down').ondrop = function (ev) {
            ev.preventDefault();
            var id = ev.dataTransfer.getData('Text');
            var elem = document.getElementById(id); //当前拖动的元素
            var targetBody = document.getElementById("targetBody"); //当前拖动的元素
            var toElem = ev.toElement.parentElement.id; //放置位置
            if (toElem == 'down') {
                //如果为container,元素放置在末尾
                targetBody.appendChild(elem);
            } else {
                //如果为container里的元素，则插入该元素之前
                targetBody.insertBefore(elem, document.getElementById(toElem));
            }
        }

　　});
</script>